<script lang="ts" setup>
import { h, ref, reactive, watch, computed } from 'vue'
import { useResetReactive } from 'dsrz/hooks/useReset'
import { aesEncrypt, createRef, refs } from 'dsrz/utils'
import type { ColumnItem, Params, FormDetails } from '../types/index'


// 定义 props
const props = defineProps<{
  visible: boolean,
  dialogTitle: string,
}>()

// 定义 emits
const emit = defineEmits<{
  close: []
  confirm: [data: any]
}>()

// 计算属性：判断是否为导入模式
const isImportMode = computed(() => {
  return props.dialogTitle !== '导入班级'
})

const form = reactive({
  size: 'default',
  details: {} as FormDetails,
  items: [
    {
      label: '所属二级学院',
      prop: 'deptId',
      is: 'currency-select',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        // request: () => classAddSecond(),
        // update: (params: D) => reactive(params),
        clearable: true,
        placeholder: '请选择所属二级学院',
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
        ],
      },
    },
    {
      label: '所属年级',
      prop: 'gradeId',
      is: 'currency-select',
      display: true, // 导入和新增都显示
      bind: {
        clearable: true,
        placeholder: '请选择所属年级',
        options: [
          { label: '年级1', value: 'nj-1' },
          { label: '年级2', value: 'nj-2' },
        ],
      },
    },
    {
      label: '所属学期',
      prop: 'termId',
      is: 'currency-select',
      display: (value: any, row: any) => !isImportMode.value, // 只有导入时显示
      bind: {
        clearable: true,
        placeholder: '请选择所属学期',
        options: [
          { label: '上半年', value: 'sbn-1' },
          { label: '下半年', value: 'sxn-2' },
        ],
      },
    },
    {
      label: '所属专业',
      prop: 'majorId',
      is: 'currency-select',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        clearable: true,
        placeholder: '请选择所属专业',
        options: [
          { label: '专业1', value: 'zy-1' },
          { label: '专业2', value: 'zy-2' },
        ],
      },
    },
    {
      label: '班级名称',
      prop: 'name',
      is: 'el-input',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        placeholder: '请输入班级名称',
      },
    },
    {
      label: '班号',
      prop: 'code',
      is: 'el-input',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        placeholder: '请输入班号',
      },
    },
    {
      label: '校区',
      prop: 'campusId',
      is: 'currency-select',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        clearable: true,
        placeholder: '请选择校区',
        options: [
          { label: '校区1', value: 'xq-1' },
          { label: '校区2', value: 'xq-2' },
        ],
      },
    },
    {
      label: '班级类别',
      prop: 'type',
      is: 'currency-select',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        clearable: true,
        placeholder: '请选择班级类别',
        options: [
          { label: '班级类别1', value: 'bjlb-1' },
          { label: '班级类别1', value: 'bjlb-2' },
        ],
      },
    },
    {
      label: '状态',
      prop: 'enable',
      is: 'currency-radio',
      display: (value: any, row: any) => isImportMode.value, // 只有新增时显示
      bind: {
        placeholder: '请选择状态',
        options: [
          { label: '启用', value: 1 },
          { label: '禁用', value: 0 },
        ],
      },
    },
    {
      label: '选择文件',
      prop: 'file',
      is: 'currency-upload',
      display: (value: any, row: any) => !isImportMode.value, // 只有导入时显示
      bind: {
        'auto-upload': false,
        action: '#',
        limit: 1,
        accept: '.xlsx,.xls',
        buttonTitle: '选择文件',
      },
    },

  ],
  rules: {
    deptId: [{ required: true, message: '请选择所属二级学院', trigger: 'blur' }],
    gradeId: [{ required: true, message: '请选择所属年级', trigger: 'blur' }],
    termId: [{ required: true, message: '请选择所属学期', trigger: 'blur' }],
    majorId: [{ required: true, message: '请选择所属专业', trigger: 'blur' }],
    name: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入班号', trigger: 'blur' }],
    campusId: [{ required: true, message: '请选择校区', trigger: 'blur' }],
    type: [{ required: true, message: '请选择班级类别', trigger: 'blur' }],
    enable: [{ required: true, message: '请选择状态', trigger: 'blur' }],
    file: [{ required: true, message: '请选择选择文件', trigger: 'blur' }],
  },
})

// 监听 dialogTitle 变化，设置表单默认值
watch(() => props.dialogTitle, (newTitle) => {
  if (newTitle === '修改班级' && form) {
    Object.assign(form, { 
      details: { enable: 0, type: 'bjlb-1' } as FormDetails // 重置表单，设置默认值
    })
  }
}, { immediate: true })

const handleConfirm = async () => {
  // 通过全局 refs 访问表单实例
  const formInstance = refs.formRef

  console.log('22 form ', form.details)
  
  if (formInstance) {
    // 触发表单验证
    const isValid = await formInstance.validate()
    if (isValid) {
      // 验证通过，执行确认逻辑
      console.log('表单验证通过', form.details)
      emit('confirm', form.details)
      emit('close') // 通知父组件关闭弹出框
    } else {
      // 验证失败
      console.log('表单验证失败')
      return false // 阻止对话框关闭
    }
  } else {
    console.log('表单实例未找到')
    return false
  }
}

// 重置表单逻辑
const resetForm = () => {
  console.log('重置表单')
}

const cancel = () => {
    Object.assign(form, { 
        details: { enable: 1 } as FormDetails // 重置表单，设置默认值
    })
    resetForm()
    emit('close') // 通知父组件关闭弹出框
}

</script>

<template>
    <CurrencyDialog
      v-model="props.visible"
      :title="props.dialogTitle"
      :size="form.size"
      @cancel="cancel"
      @confirm="handleConfirm"
      >
      <CurrencyForm
        ref="formRef"
        v-model="form.details"
        :items="form.items"
        :rules="form.rules"
        label-position="top"
      />
    </CurrencyDialog>
</template>